<template>
	<view class="wrapper">
		<template v-if="gyInfo != null">
			<scroll-view class="tabNav" scroll-with-animation scroll-x :scroll-left="scrollLeft" v-if="tabNav.length > 1">
				<view class="tabItem"
					:class="[currentTab == index ? 'active' : '']"
					v-for="(item,index) in tabNav"
					:key="index"
					@tap="switchTab(index,item)"
				>{{item.name}}</view>
			</scroll-view>
			<view class="gyWrap" :class="[(fromPage == 'zxsGy' && (gyInfo.lcNo == 1 || gyInfo.lcNo == 3)) ||　(fromPage == 'user' && gyInfo.lcNo == 2) ? 'hasFixed' : '']">
				<view class="modCon basicInfo">
					<view class="userInfo spaceBet">
						<image class="userHead" v-if="gyInfo.headImg == ''" :src="defHead"></image>
						<image class="userHead" v-else :src="gyInfo.headImg"></image>
						<view class="userTit">{{fromPage == 'zxsGy' ? '用户信息' : '个人信息'}}</view>
					</view>
					<view class="conItem">
						<view class="itemTit">姓名</view>
						<view class="itemCon">{{gyInfo.userName}}</view>
					</view>
					<view class="conItem">
						<view class="itemTit">性别</view>
						<view class="itemCon">{{gyInfo.userSex}}</view>
					</view>
					<view class="conItem">
						<view class="itemTit">年龄</view>
						<view class="itemCon">{{gyInfo.userAge}}</view>
					</view>
					<view class="conItem">
						<view class="itemTit">联系电话</view>
						<view class="itemCon">{{gyInfo.userMobile}}</view>
					</view>
					<view class="conItem">
						<view class="itemTit">职业</view>
						<view class="itemCon">{{gyInfo.userWork}}</view>
					</view>
					<view class="conItem hasBorBot">
						<view class="itemTit">居住地址</view>
						<view class="itemCon">{{gyInfo.county}}{{gyInfo.town}}{{gyInfo.villageName}}</view>
					</view>
					<view class="bigConItem spaceBet">
						<view class="bigTit">测评量表</view>
						<view class="csTime">{{scaleTit}}</view>
					</view>
					<view class="bigConItem spaceBet">
						<view class="bigTit">测评时间</view>
						<view class="csTime">{{gyInfo.cpTime}}</view>
					</view>
					<view class="bigConItem spaceBet">
						<view class="bigTit">预警等级</view>
						<view class="yjLevel red" v-if="gyInfo.yjLevel == 1">红色</view>
						<view class="yjLevel yellow" v-if="gyInfo.yjLevel == 2">黄色</view>
					</view>
					<view class="bigConItem spaceBet" @tap="goInitReport">
						<view class="bigTit">测评报告</view>
						<view class="cpRep hasBg">
							<text class="iconfont icon-xinggeceping"></text>
							<text>测评报告</text>
						</view>
					</view>
					<view class="bigConItem noBorBot spaceBet">
						<view class="bigTit">干预状态</view>
						<view class="gyStatus noGy" v-if="gyInfo.gyStatus == 1">未干预</view>
						<view class="gyStatus gyIng" v-if="gyInfo.gyStatus == 2">干预中</view>
						<view class="gyStatus gyComp" v-if="gyInfo.gyStatus == 3">已完成</view>
					</view>
				</view>
				<template v-if="gyList.length > 0">
					<view class="gyList"
						:class="'gyInfo-' + (index+1)"
						v-for="(item,index) in gyList"
						:key="index"
					>
						<view class="listInfo gyInfo">
							<view class="gyRep main spaceBet">
								<view>干预报告</view>
								<view class="gyTimes">第{{index+1}}次干预</view>
							</view>
							<view class="gyAdd">
								<view class="infoTit hasMargBot">干预咨询师</view>
								<view class="gyAddress">{{item.gyInfo.zxsName}}</view>
							</view>
							<view class="gyAdd">
								<view class="infoTit hasMargBot">干预地点</view>
								<view class="gyAddress">{{item.gyInfo.zxAddress}}</view>
							</view>
							<view class="gyAdd spaceBet">
								<view class="infoTit">干预日期</view>
								<view class="infoCon">{{item.gyInfo.zxDate}}</view>
							</view>
							<view class="gyAdd spaceBet">
								<view class="infoTit">干预时间</view>
								<view class="infoCon">{{item.gyInfo.classTime}}</view>
							</view>
							<view class="gyAdd">
								<view class="infoTit hasMargBot">问题归类</view>
								<view class="queList clearfix">
									<view class="typeItem"
										v-for="(innerItem,innerIndex) in formatType(item.gyInfo.zxwtType)"
										:key="innerIndex"
									>{{innerItem}}</view>
								</view>
							</view>
							<template v-if="item.gyInfo.zxTitle != undefined">
								<view class="gyAdd">
									<view class="infoTit hasMargBot">咨询主题</view>
									<view class="gyAddress">
										<rich-text :nodes="item.gyInfo.zxTitle"></rich-text>
									</view>
								</view>
								<view class="gyAdd">
									<view class="infoTit hasMargBot">辅导要点</view>
									<view class="gyAddress">
										<rich-text :nodes="item.gyInfo.fdyd"></rich-text>
									</view>
								</view>
								<view class="gyAdd">
									<view class="infoTit hasMargBot">总结反思</view>
									<view class="gyAddress">
										<rich-text :nodes="item.gyInfo.zjfs"></rich-text>
									</view>
								</view>
							</template>
						</view>
						<view class="listInfo csInfo" v-if="item.xlcsInfo.comStatus == 2">
							<view class="gyRep">第{{index+1}}次试测</view>
							<view class="gyAdd spaceBet">
								<view class="infoTit">预警等级</view>
								<view class="yjLevel red" v-if="item.xlcsInfo.yjLevel == 1">红色</view>
								<view class="yjLevel yellow" v-if="item.xlcsInfo.yjLevel == 2">黄色</view>
								<view class="yjLevel blue" v-if="item.xlcsInfo.yjLevel == 3">蓝色</view>
								<view class="yjLevel green" v-if="item.xlcsInfo.yjLevel == 4">绿色</view>
							</view>
							<view class="gyAdd spaceBet">
								<view class="infoTit">量表发送时间</view>
								<view class="infoCon">{{item.xlcsInfo.sendTime}}</view>
							</view>
							<view class="gyAdd spaceBet">
								<view class="infoTit">测试时间</view>
								<view class="infoCon">{{item.xlcsInfo.comTime}}</view>
							</view>
							<view class="gyAdd spaceBet" @tap="goViewTestRep(item.xlcsInfo.gyLogId)">
								<view class="infoTit">测评报告</view>
								<view class="hasFlex">
									<view class="cpRep hasBg">
										<text class="iconfont icon-xinggeceping"></text>
										<text>测评报告</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</template>
				<view class="btnGroup" v-if="(fromPage == 'zxsGy' && (gyInfo.lcNo == 1 || gyInfo.lcNo == 3)) || fromPage == 'user' && gyInfo.lcNo == 2">
					<button class="comBtn" @tap="goAddGyRep" v-if="gyInfo.lcNo == 1">增加干预报告</button>
					<button class="comBtn" @tap="dealWjgy" v-if="gyInfo.lcNo == 3">完成干预</button>
					<!-- <text class="tips">(第一次干预试测)</text> -->
					<button class="comBtn" v-if="gyInfo.lcNo == 2" @tap="goGyTest">去测评</button>
				</view>
			</view>
		</template>
		<template v-else>
			<view class="loadingWrap">
				<loading loadType="2"></loading>
			</view>
		</template>
		<common-alert :showAlertFlag="showAlertFlag" :maskClosable="maskClosable">
			<view class="alertContent">是否确认完成本次干预任务?</view>
			<view class="tui-alert-btn" :hover-stay-time="150">
				<view class="cancelBtn" @tap.stop="cancel">取消</view>
				<view class="sureBtn" @tap="sureDeal">确认</view> 
			</view>
		</common-alert>
	</view>
</template>

<script>
	import { getGyDet,dealWjgy } from '@/api/mine/index.js'
	import getQue from '@/mixins/getQue.js'
	export default {
		data(){
			return{
				defHead:this.defHead,
				logId:0,
				detId:0,
				testLogId:0,
				gyInfo:null,
				gyList:[],
				fromPage:'',//zxsGy(咨询师进来) user
				isRefreshFlag:false,
				maskClosable:false,
				showAlertFlag:false,
				scaleTit:'',
				distanceArr: [], // 每一个ID对应的scrollTop值
				tabNav:[{id:'.basicInfo',name:'用户信息'}],
				currentTab:0,
				isTabChange: false, // 防止在点击tab的时候，页面的滚动导致重复计算、抖动问题
			}
		},
		mixins:[getQue],
		computed:{
			scrollLeft() {
			    //return (this.currentTab - 1) * 80; 
				return (this.currentTab) * 80
				/*
					0 0
					1 0
					2 80
					3 160
					4 240
				*/
			},
			formatType(){
				return function(str){
					let tmpArr = str.split(',')
					return tmpArr
				}
			}
		},
		onLoad(option){
			this.fromPage = option.fromPage;
			this.scaleTit = option.cpTit;
			this.logId = option.logId;
			this.detId = option.detId;
			this.getDetail();
		},
		onShow(){
			if(this.isRefreshFlag){
				this.tabNav = [{id:'.basicInfo',name:'用户信息'}];
				this.currentTab = 0;
				this.isTabChange = false;
				uni.pageScrollTo({
				   scrollTop: 0,
				   duration: 0,
				})
				this.getDetail();
			}
		},
		onHide(){
			this.isRefreshFlag = false;
		},
		onUnload(){
			uni.removeStorageSync('queList')
		},
		onPageScroll(event){
			const _this = this
			if (this.isTabChange) {
				return
			}
			const { scrollTop } = event;
			const skewY = 60 // 偏移量，由于吸顶的tab、头部的显示信息也有高度，素以做了偏移量
			if (scrollTop >= skewY) {
				if (this.currentTab <= 0) { // 在未显示tab并且 currentTab <= 0时，防止uview ui抖动bug，设置默认复位值
					this.currentTab = 0
				}
				this.$nextTick(() => {
					const length = this.distanceArr.length
					const index = this.distanceArr.findIndex(el => el - skewY - scrollTop > 0)
					// 当index  == -1 的时候，实际当前滚动的距离超出了最大值，也就是在最后一个tab显示的内容
					// 当index > 0 的时候，说明能在当前的scrollTop值找到，即index的前一位
					this.currentTab = index > 0 ? index - 1 : length - 1
				})
			}
		},
		methods:{
			// 获取所有元素在当前页面所处的位置信息
			getDistanceArr () {
				const _this = this;
				//_this.distanceArr = [];
				_this.tabNav.map(el => {
					uni.createSelectorQuery().select(el.id).boundingClientRect(data => {
						// 获取当前ID距离顶部的top值
						_this.distanceArr.push(data.top);
					}).exec()
				})
			},
			switchTab(index,item){
				this.isTabChange = true;
				const _this = this
				// this.$nextTick 保证当前isTabChange 为true后执行代码
				// 避免在istabChange变为true的时候，执行代码，监听事件还是会继续执行重新计算currenTab值
				this.$nextTick(() => {
					_this.currentTab = index
					uni.createSelectorQuery().select(item.id).boundingClientRect(data => {
						uni.createSelectorQuery().select('.wrapper').boundingClientRect(res => {
							const scrollTop = data.top - res.top // 获取差值
							const skewY = 50 // 偏移
							// 页面开始进行滚动到目标位置
							uni.pageScrollTo({
								scrollTop: scrollTop > 0 ? scrollTop - skewY :  scrollTop + skewY,
								duration: 300,
								complete: function () {
									const timer = setTimeout(() => {
										_this.isTabChange = false // 关闭
										clearTimeout(timer)
									}, 500) // 解决ios和安卓、鸿蒙系统兼容性问题
								}
							});
						}).exec()
					}).exec()
				})
			},
			getDetail(){
				let field = { allotDetailId:this.detId,logId:this.logId }
				getGyDet(field).then(res=>{
					//console.log(res)
					this.gyInfo = res.data.datas;
					this.gyList = res.data.datas.gyList;
					if(this.gyList.length > 0){
						var gyLen = this.gyList.length;
						var tmpArr = [];
						for(var i=0;i<gyLen;i++){
							var tmpObj = {
								id:'',
								name:''
							}
							tmpObj.id = `.gyInfo-${i+1}`;
							tmpObj.name = `第${i+1}次干预`;
							tmpArr.push(tmpObj);
						}
						this.tabNav.push(...tmpArr);
						this.$nextTick(()=>{
							this.getDistanceArr();
						})
					}
					if(this.gyInfo.lcNo == 2 && this.fromPage == 'user'){
						var field = { scaleId:this.gyInfo.gyCsId,opt:'zzGroup' };
						this.loadTestQueList(field)
					}
				}).catch(err=>{})
			},
			goInitReport(){
				uni.navigateTo({
					url:'/pages/subIndex/cpReport/cpReport?logId=' + this.logId + '&fromPage=gyDetInit'
				})
			},
			goAddGyRep(){
				uni.navigateTo({
					url:'/pages/subMine/myGy/addGyRep?detId=' + this.detId + '&userName=' + this.gyInfo.userName
				})
			},
			goGyTest(){
				uni.navigateTo({
					url:'/pages/subIndex/cpQue/cpQue?fromPage=gyDetPage&gyLogId=' + this.gyInfo.gyLogId + '&cpTit=' + this.scaleTit
				})
			},
			//查看试测报告
			goViewTestRep(gyLogId){
				uni.navigateTo({
					url:'/pages/subIndex/cpReport/cpReport?logId=' + gyLogId + '&fromPage=gyDetTest'
				})
			},
			dealWjgy(){
				this.showAlertFlag = true;
			},
			sureDeal(){
				uni.showLoading({ title: '处理中...', mask: true });
				let field = { allotDetailId:this.detId }
				dealWjgy(field).then(res=>{
					uni.showToast({ title: '处理成功' });
					let pages = getCurrentPages();
					let prevPage = pages[pages.length - 2];
					prevPage.$vm.isRefreshFlag = true;
					setTimeout(()=>{
						this.showAlertFlag = false;
						this.getDetail();
					},1500);
				}).catch(err=>{
					this.showAlertFlag = false;
				})
			},
			cancel(){
				this.showAlertFlag = false;
			}
		}
	}
</script>

<style lang="scss">
	page{
		background: $pss-bg-primary;
		// border-top: $comBor;
	}
	@import '@/static/scss/orderDet.scss';
	@import url("/static/css/common/alert.css");
	.wrapper{
		min-height: 100vh;
	}
	.tabNav{
		width: 100%;
		height: 80rpx;
		background: #fff;
		box-shadow: 0 6rpx 6rpx rgba(0,0,0,.05);
		margin-bottom: 20rpx;
		position: sticky;
		left: 0;
		top: 0;
		white-space: nowrap;
		~ .gyWrap{
			padding: 0 30rpx 20rpx;
			&.hasFixed{
				padding: 0rpx 30rpx 120rpx;
			}
		}
		.tabItem{
			width: 100px;
			text-align: center;
			line-height: 80rpx;
			font-size: 28rpx;
			display: inline-block;
			color: $pss-text-color8;
			&.active{
				color: $pss-text-color0;
				font-size: 30rpx;
				font-weight: 600;
			}
		}
	}
	.gyWrap{
		padding: 20rpx 30rpx;
		&.hasFixed{
			padding: 20rpx 30rpx 120rpx;
		}
	}
	.conItem{
		&.hasBorBot{
			border-bottom: $comBor;
			padding-bottom: 15rpx;
		}
	}
	.bigConItem{
		padding: 40rpx 0;
		border-bottom: $comBor;
		&.noBorBot{
			border-bottom: none;
			margin-bottom: -20rpx;
		}
		.bigTit{
			font-size: 28rpx;
			color: $pss-text-color0;
			font-weight: 600;
		}
		.csTime{
			color: $pss-color-blueDeep;
			font-size: 28rpx;
		}
		.gyStatus{
			font-size: 28rpx;
			&.noGy{
				color:$pss-text-color8;
			}
			&.gyIng{
				color: #FF9F40;
			}
			&.gyComp{
				color:$pss-color-blueDeep ;
			}
		}
	}
	.yjLevel,
	.cpRep{
		height:42rpx;
		line-height: 42rpx;
		padding: 0 15rpx;
		color: #fff;
		font-size: 24rpx;
		border-radius: 6rpx;
		&.red{
			background: $pss-color-red;
		}
		&.yellow{
			background: #FF9F40; 
		}
		&.blue{
			background: #1485FA;
		}
		&.green{
			background: #18CDB9;
		}
		&.hasBg{
			background: $pss-color-blueDeep;
		}
		.icon-xinggeceping{
			font-size: 28rpx;
			color: #B1CCFA;
			margin-right: 10rpx;
		}
	}
	.gyList{
		// background: $pss-bg-primary;
		margin-bottom: 30rpx;
		&:last-child{
			margin-bottom: 0;
		}
		.listInfo{
			background: #fff;
			padding-bottom: 20rpx;
			&.hasMargBot{
				margin-bottom: 20rpx;
			}
			font-size: 28rpx;
			.gyRep{
				height: 80rpx;
				line-height: 80rpx;
				padding: 0 20rpx;
				align-items: center;
				color: $pss-color-blueDeep;
				background: #DAE6FE;
				&.main{
					color: #fff;
					background: $pss-color-blueDeep;
				}
				.gyTimes{
					height:42rpx;
					line-height: 42rpx;
					padding: 0 20rpx;
					color: #fff;
					font-size: 24rpx;
					border-radius: 8rpx;
					background: #B1CCFA;
				}
			}
			.gyAdd{
				margin-top: 30rpx;
				padding: 0 20rpx;
			}
			.infoTit{
				font-weight: 600;
				color: $pss-text-color0;
				&.hasMargBot{
					margin-bottom: 15rpx;
				}
			}
			.infoCon{
				color: $pss-color-blueDeep;
				&.yellow{
					height:42rpx;
					line-height: 42rpx;
					padding: 0 15rpx;
					color: #fff;
					font-size: 24rpx;
					border-radius: 8rpx;
					background: #FF9F40; 
				}
			}
			.queList{
				margin-bottom: -20rpx;
			}
			.gyAddress{
				padding: 15rpx;
				border-radius: 8rpx;
				background: #FAF9FE;
				color: $pss-text-color8;
			}
			.typeItem{
				width: 32%;
				height: 60rpx;
				line-height: 60rpx;
				background: $pss-color-blueDeep;
				border-radius: 6rpx;
				text-align: center;
				font-size: 26rpx;
				color: #fff;
				float: left;
				margin-bottom:20rpx;
				&:nth-of-type(3n){
					float: right;
				}
				&:nth-of-type(3n-1){
					margin-left: 2.2%;
				}
			}
		}
	}
	.btnGroup{
		width: 100%;
		height: 120rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		background: #fff;
		box-shadow: 0 -6rpx 6rpx rgba(0,0,0,.05);
		display: flex;
		align-items: center;
		.comBtn{
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			margin: 0 30rpx;
			border-radius: 8rpx;
			font-size: 28rpx;
			.tips{
				font-size: 26rpx;
				margin-left: 10rpx;
			}
		}
	}
</style>